<template>
  <div :class="'album-list ' + diff">
    <div
      class="item"
      :class="numClass"
      v-for="(item, index) of listData"
      :key="item.catalogueId || item.countryId || item.songSheetId"
    >
      <div class="wrapper">
        <div class="image">
          <el-image
            :key="
              item.cover500 || item.cover200 || item.minimgUrl || item.imgUrl
            "
            :src="
              item.cover500 || item.cover200 || item.minimgUrl || item.imgUrl
            "
            :preview-src-list="
              diff === 'musicScore-box'
                ? [listData[index].scoreView]
                : diff == 'album-box-kuke'
                ? [item.minimgUrl]
                : item.cover500
                ? [item.cover500]
                : item.imgUrl
                ? [item.imgUrl]
                : none
            "
            :fit="
              diff == 'musicScore-box' || diff == 'album-box-kuke'
                ? 'fill'
                : 'contain'
            "
          >
            <div slot="placeholder" class="image-slot flex-center flex-column">
              <i class="iconfont el-icon-loading"></i>
              <p>
                {{ $t("public.loading") }}
                <span class="dot">...</span>
              </p>
            </div>
            <div slot="error" class="image-slot flex-center image-error">
              <!-- <i class="el-icon-picture-outline"></i> -->
              <img src="@/assets/images/defaultCover.png" />
            </div>
          </el-image>
          <!-- @change="SelectionChange" -->
          <el-checkbox
            class="isCheck"
            v-if="isCheck"
            :label="item.catalogueId || item.countryId || item.songSheetId"
            :key="item.catalogueId || item.countryId || item.songSheetId"
            >&nbsp;</el-checkbox
          >
          <!-- 遮罩层 -->
          <div
            class="viewCover"
            @click="diff === 'musicScore-box' && onPreview(index)"
          ></div>
        </div>
        <div class="info" @click="toDetail(item)">
          <h2
            :class="numClass === 'two' ? 'ellipsis-two' : 'ellipsis'"
            @click="diff === 'musicScore-box' && onPreview(index)"
            v-text="
              $i18n.locale === 'zh'
                ? item.catalogueCname ||
                  item.catalogueName ||
                  item.cname ||
                  item.name
                : item.catalogueName || item.name
            "
          ></h2>
          <!-- 专辑 -->
          <div class="info-content" v-if="diff == 'album-box'">
            <li>
              <span>{{ $t("public.brand") }}</span>
              <p v-if="item.musicLabel" :title="item.musicLabel.displayName">
                <span v-text="item.musicLabel.displayName"></span>
                <!-- @click.stop="musicLabel(item.musicLabel)" -->
              </p>
              <p v-else>{{ $t("public.noInformation") }}</p>
            </li>
            <li>
              <span>{{ $t("public.classify") }}</span>
              <p v-if="item.categories && item.categories.length > 0">
                <!-- @click.stop="categories(i)" -->
                <span
                  v-for="(i, idx) of item.categories"
                  v-text="
                    $i18n.locale === 'zh'
                      ? i.categoryCname || i.categoryName
                      : i.categoryName
                  "
                  :title="
                    $i18n.locale === 'zh'
                      ? i.categoryCname || i.categoryName
                      : i.categoryName
                  "
                  :key="idx"
                >
                </span>
              </p>
              <p v-else>{{ $t("public.noInformation") }}</p>
            </li>
            <li>
              <span>{{ $t("public.composer") }}</span>
              <p v-if="item.arrangers && item.arrangers.length > 0">
                <!-- @click.stop="arrangers(i)" -->
                <span
                  v-for="i of item.arrangers"
                  v-text="
                    $i18n.locale === 'zh'
                      ? i.fullCname || i.fullName
                      : i.fullName
                  "
                  :title="
                    $i18n.locale === 'zh'
                      ? i.fullCname || i.fullName
                      : i.fullName
                  "
                  :key="i.personId"
                ></span>
              </p>
              <p v-else>{{ $t("public.noInformation") }}</p>
            </li>
            <li class="info-artist">
              <div class="artists">
                <span>{{ $t("public.artist") }}</span>
                <p v-if="item.artists && item.artists.length > 0">
                  <!-- @click.stop="artists(i)" -->
                  <span
                    v-for="i of item.artists"
                    v-text="
                      $i18n.locale === 'zh'
                        ? i.fullCname || i.fullName
                        : i.fullName
                    "
                    :title="
                      $i18n.locale === 'zh'
                        ? i.fullCname || i.fullName
                        : i.fullName
                    "
                    :key="i.personId"
                  ></span>
                </p>
                <p v-else>{{ $t("public.noInformation") }}</p>
              </div>
              <span
                class="catalogueId"
                title="item.catalogueId"
                v-if="numClass == 'one'"
                v-text="item.catalogueId"
              ></span>
            </li>
          </div>
          <!-- KUKE搜索后专辑 -->
          <div class="info-content" v-if="diff == 'album-box-kuke'">
            <li>
              <span>{{ $t("public.brand") }}</span>
              <p v-if="item.catName" :title="item.catName">
                <!-- @click.stop="musicLabel(item.catName)" -->
                <span v-text="item.catName"></span>
              </p>
              <p v-else>{{ $t("public.noInformation") }}</p>
            </li>
            <li>
              <span>{{ $t("public.classify") }}</span>
              <p
                v-if="item.categories && item.categories.length > 0"
                :title="item.categories.join('  ')"
              >
                <!-- @click.stop="categories(i)" -->
                <span
                  v-for="(i, idx) of item.categories"
                  v-text="$i18n.locale === 'zh' ? i : i"
                  :key="idx"
                >
                </span>
              </p>
              <!-- <p v-else-if="item.catName">
                <span v-text="item.catName"></span>
              </p> -->
              <p v-else>{{ $t("public.noInformation") }}</p>
            </li>
            <li>
              <span>{{ $t("public.composer") }}</span>
              <p
                v-if="item.composers && item.composers.length > 0"
                :title="item.composers.join('  ')"
              >
                <!-- @click.stop="arrangers(i)" -->
                <span
                  v-for="(i, idx) of item.composers"
                  v-text="i"
                  :key="idx"
                ></span>
              </p>
              <p v-else>{{ $t("public.noInformation") }}</p>
            </li>
            <li class="info-artist">
              <div class="artists">
                <span>{{ $t("public.artist") }}</span>
                <p
                  v-if="
                    item.artists &&
                    item.artists.length > 0 &&
                    $i18n.locale !== 'zh'
                  "
                  :title="item.artists.join('  ')"
                >
                  <!-- @click.stop="artists(i)" -->
                  <span
                    v-for="(i, idx) of item.artists"
                    v-text="i"
                    :key="idx"
                  ></span>
                </p>
                <p
                  v-else-if="
                    item.cnArtists &&
                    item.cnArtists.length > 0 &&
                    $i18n.locale === 'zh'
                  "
                  :title="item.cnArtists.join('  ')"
                >
                  <!-- @click.stop="artists(i)" -->
                  <span
                    v-for="(i, idx) of item.cnArtists"
                    v-text="i"
                    :key="idx"
                  ></span>
                </p>
                <p v-else>{{ $t("public.noInformation") }}</p>
              </div>
              <span
                class="catalogueId"
                title="item.catalogueId"
                v-if="numClass == 'one'"
                v-text="item.catalogueId"
              ></span>
            </li>
          </div>
          <!-- 我喜欢-歌单 -->
          <div class="info-content" v-else-if="diff == 'song-list'">
            <li>
              <span>{{ $t("main.chapter") }}</span>
              <p
                v-if="item.trackCount"
                v-text="item.trackCount"
                :title="item.trackCount"
              ></p>
              <p v-else>{{ $t("public.noInformation") }}</p>
            </li>
            <li>
              <span>{{ $t("main.duration") }}</span>
              <p
                v-if="item.totalTiming"
                v-text="utils.formatSecondTime(item.totalTiming)"
                :title="utils.formatSecondTime(item.totalTiming)"
              ></p>
              <p v-else>{{ $t("public.noInformation") }}</p>
            </li>
            <li>
              <span>{{ $t("main.author") }}</span>
              <p
                v-if="item.author"
                v-text="item.author"
                :title="item.author"
              ></p>
              <p v-else>{{ $t("public.noInformation") }}</p>
            </li>
            <li>
              <span>{{ $t("main.creationDate") }}</span>
              <p
                v-if="item.createTime"
                v-text="utils.formateDate(item.createTime)"
                :title="utils.formateDate(item.createTime)"
              ></p>
              <p v-else>{{ $t("public.noInformation") }}</p>
            </li>
          </div>
          <!-- 乐谱 -->
          <div class="info-content" v-else-if="diff == 'musicScore-box'">
            <li>
              <p>
                {{ $t("home.chapter") }}：<span
                  >({{ item.page + $t("public.page") }})</span
                >
              </p>
              <p>
                {{ $t("public.price") }}：<span
                  >{{ item.price }}{{ $t("public.dollar") }}</span
                >
              </p>
            </li>
            <li>
              <p class="zoom-in" @click="onPreview(index)">
                <svg-icon name="zoom" class="icon icon-zoom" />
              </p>
              <p
                class="download"
                @click="
                  openDialog(
                    'download',
                    item.scoreId,
                    $i18n.locale === 'zh' ? item.cname : item.name
                  )
                "
              >
                <svg-icon
                  name="download-score"
                  class="icon icon-download-score"
                />
              </p>
            </li>
          </div>
        </div>
      </div>
    </div>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="
        diff == 'musicScore-box'
          ? [listData[viewIndex].scoreView]
          : [listData[viewIndex].cover500]
      "
    />
    <!-- 加载更多 -->
    <div v-if="loading" class="load-bottom">
      <nice-loading />
    </div>
    <!--弹窗界面-->
    <el-dialog
      width="20%"
      :title="$t('public.passwordAuthentification')"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <!-- 下载弹窗 -->
      <el-form :model="download" class="download" :rules="rules" ref="download">
        <el-form-item :label="$t('public.account')" prop="account">
          <el-input
            v-model="download.account"
            :placeholder="$t('public.enterAccount')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.password')" prop="password">
          <el-input
            v-model="download.password"
            show-password
            :placeholder="$t('public.enterPassword')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button class="clearBtn" @click.native="dialogFormVisible = false">{{
          $t("public.cancel")
        }}</el-button>
        <el-button type="primary" @click="createData('download')">{{
          $t("public.save")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Image } from "element-ui";
export default {
  data() {
    return {
      showViewer: false,
      // srcList: [
      //   "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      //   "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      // ],
      viewIndex: -1,
      dialogFormVisible: false, //下载弹窗
      //弹窗界面数据
      download: {
        roleId: "0", //待定
        account: "",
        password: "",
      },
      currentScore: {
        name: "", //下载文件名
        musicBookId: "", //乐谱ID
      },
      downParams: {}, // 下载参数
    };
  },
  components: {
    ElImageViewer: Image.components.ImageViewer,
  },
  props: {
    listData: {
      type: Array,
    },
    num: {
      type: Number,
      default: 1,
    },
    diff: {
      type: String,
      default: "album-box",
    },
    toName: {
      type: String,
      default: "albumDetail",
    },
    // 是否显示选择框
    isCheck: {
      type: Boolean,
      default: false,
    },
    // 是否显示加载更多动画
    loading: {
      type: Boolean,
    },
  },
  mounted() {},
  computed: {
    numClass() {
      return this.num == 1 ? "one" : "two";
    },
    onRoutes() {
      return this.$route.path.split("/")[1];
    },
    // 乐谱下载
    rules() {
      return {
        account: [
          {
            required: true,
            message: this.$t("public.accountEmpty"),
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: this.$t("public.passwordEmpty"),
            trigger: "blur",
          },
        ],
      };
    },
    isMobile() {
      return this.$store.getters.isMobile;
    },
  },
  methods: {
    // SelectionChange() {
    //   this.$emit("childCheck");
    //   // console.log(checkAll)
    //   // let checkAll = this.listData.length === this.checkList.length;
    //   // this.$emit("childCheck", this.checkList, checkAll);
    // },
    toDetail(item) {
      if (this.diff === "musicScore-box") {
        return false;
      } else if (this.diff === "album-box" || this.diff === "album-box-kuke") {
        let params = {
          sort: "",
          id: item.catalogueId || item.countryId,
        };
        if (item.moduleId == 516 || this.onRoutes === "classical") {
          params.sort = "classical";
          this.$router.push({
            name: this.isMobile
              ? "mClassicalAlbumDetail"
              : "classicalAlbumDetail",
            params,
          });
        } else if (item.moduleId == 518 || this.onRoutes === "national") {
          params.sort = "national";
          this.$router.push({
            name: this.isMobile
              ? "mNationalAlbumDetail"
              : "nationalAlbumDetail",
            params,
          });
        } else if (item.moduleId == 580 || this.onRoutes === "jazz") {
          params.sort = "jazz";
          this.$router.push({
            name: this.isMobile ? "mJazzAlbumDetail" : "jazzAlbumDetail",
            params,
          });
        } else if (item.moduleId == 517 || this.onRoutes === "audio-book") {
          params.sort = "audio-book";
          this.$router.push({
            name: this.isMobile
              ? "mAudioBooksAlbumDetail"
              : "audioBooksAlbumDetail",
            params,
          });
        }
        // let params = {
        //   // moduleId: item.moduleId,
        //   sort:
        //     item.moduleId == 516 || this.onRoutes === "classical"
        //       ? "classical"
        //       : item.moduleId == 518 || this.onRoutes === "national"
        //       ? "national"
        //       : item.moduleId == 580 || this.onRoutes === "jazz"
        //       ? "jazz"
        //       : item.moduleId == 517 || this.onRoutes === "audio-book"
        //       ? "audio-book"
        //       : "",
        //   id: item.catalogueId || item.countryId,
        // };
        // this.$router.push({
        //   name:
        //     this.isMobile && this.toName === "albumDetail"
        //       ? "mAlbumDetail"
        //       : this.toName,
        //   // this.ismOrpc === "pc-app" ? this.toName : this.toName === "albumDetail" ? "mAlbumDetail" : this.toName,
        //   params,
        // });
      } else if (this.diff === "song-list") {
        if (this.isMobile) {
          this.$router.push({
            name:
              item.moduleId == 516
                ? "classicalMSongListDetail"
                : item.moduleId == 518
                ? "nationalMSongListDetail"
                : item.moduleId == 580
                ? "jazzMSongListDetail"
                : "",
            params: { id: item.songSheetId },
          });
        } else {
          this.$router.push({
            name:
              item.moduleId == 516
                ? "classicalSongListDetail"
                : item.moduleId == 518
                ? "nationalSongListDetail"
                : item.moduleId == 580
                ? "jazzSongListDetail"
                : "",
            params: { id: item.songSheetId },
          });
        }
      }
    },
    // 乐谱下载弹框
    async openDialog(type, id, name) {
      if (!this.$store.getters.loginStatu) {
        this.$store.commit("SET_DIALOGLOGIN", true);
        return;
      }
      // 不限制下载
      if (type == "download") {
        this.downParams = {
          downloadType: 509,
          moduleId: 590,
          contentId: id,
          theWay: 2,
        };
        this.downInfo(this.downParams, "download", { name, id });
      }
      // this.dialogFormVisible = true;
      // if (type == "score") {
      //   this.currentScore.name = name;
      //   this.currentScore.musicBookId = id;
      // }
    },
    // 保存不同下载信息
    async downInfo(params, type, item) {
      if (type == "download" && item) {
        this.currentScore.name = item.name;
        this.currentScore.musicBookId = item.id;
      }
      let res = await this.$api.user.userDownloadCheck(params);
      // 不需要账密(不弹框)
      if (res.code === 1000000) {
        this.dialogFormVisible = false;
        this.createData(type);
      } else if (res.code === 1701001) {
        this.$message({
          message: this.$t("public.downFailed"),
          showClose: true,
          type: "error",
        });
      } else if (res.code === 1701002) {
        // 需要账密弹框
        this.dialogFormVisible = true;
        // 如果打开弹框 重置表单规则
        this.$nextTick(() => {
          this.$refs[type].resetFields();
        });
        this.downParams.theWay = 1;
      } else if (res.code === 1701003) {
        this.$message({
          showClose: true,
          message: this.$t("public.downBalanceInsufficient"),
          type: "error",
        });
      } else if (res.code === 1701004) {
        this.$message({
          showClose: true,
          message: this.$t("public.accountPasswordIncorrect"),
          type: "error",
        });
      } else if (res.code === 1000002) {
        this.$notify({
          title: this.$t("public.warning"),
          message: this.$t("public.musicScoreValidityExpires"),
          type: "warning",
          offset: 100,
        });
      }
    },
    //弹窗 提交按钮
    async createData(type) {
      // 需要输入账密验证
      if (this.dialogFormVisible) {
        this.$refs[type].validate(async (valid) => {
          if (valid) {
            this.downParams.account = this.download.account;
            this.downParams.password = this.download.password;
            this.downInfo(this.downParams, type);
            return false;
          }
        });
      } else {
        let params = {
          musicBookId: this.currentScore.musicBookId,
        };
        let res = await this.$api.user.musicBookPath(params);
        if (res.data) {
          this.dialogFormVisible = false;
          this.$message({
            message: this.$t("public.downloading"),
            showClose: true,
          });
          this.utils.downRow(res.data, this.currentScore.name, "pdf");
        } else {
          this.$message({
            message: this.$t("public.addressFailed"),
            showClose: true,
            type: "error",
          });
        }
      }
    },

    onPreview(idx) {
      this.viewIndex = idx;
      // e.stopPropagation()
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    },
    //厂牌跳转
    musicLabel(val) {
      console.log(val);
    },
    //分类跳转
    categories(val) {
      console.log(val);
    },
    //作曲家跳转
    arrangers(val) {
      console.log(val);
    },
    //艺术家跳转
    artists(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.image-error {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: auto;
}
.album-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    margin-bottom: 20px;
    .wrapper {
      width: 584px;
      height: 280px;
      display: flex;
      background: #f5f5f5;
      .image {
        position: relative;
        .el-image {
          width: 240px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 100%;
            height: auto;
          }
        }
        .isCheck {
          position: absolute;
          top: 10px;
          left: 10px;
        }
        .viewCover {
          width: 100%;
          height: 100%;
          cursor: pointer;
          display: none;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          background: rgba($color: #000000, $alpha: 0.5);
        }
      }
      .info {
        width: 344px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        > h2 {
          font-size: 20px;
          // font-weight: 500;
          font-weight: bold;
          overflow: hidden;
          color: #000000;
          max-height: 56px;
          line-height: 28px;
          font-family: PingFangSC-Medium, PingFang SC;
        }
        .info-content {
          height: calc(100% - 80px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
          li {
            font-size: 18px;
            display: flex;
            align-items: center;
            > span {
              white-space: nowrap;
              color: #333333;
            }
            p {
              color: #000000;
              font-weight: 400;
              margin-left: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              // display: flex;
              // align-items: center;
              // line-height: 100%;
              > span {
                margin-right: 16px;
              }
              &.zoom-in,
              &.download {
                .icon {
                  font-size: 25px;
                }
              }
            }
            > .artists {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
    &.one {
      width: 100%;
      .wrapper {
        width: 100%;
        .info {
          width: calc(100% - 240px);
          .info-artist {
            display: flex;
            justify-content: space-between;
            .artists {
              display: flex;
              padding-right: 20px;
              > span {
                white-space: nowrap;
              }
              > p {
                width: 680px;
              }
            }
            .catalogueId {
              white-space: nowrap;
              font-weight: 600;
              color: #333333;
            }
          }
        }
      }
    }
    &.two {
      .wrapper {
        .info {
          // > h2 {
          //   display: -webkit-box;
          //   -webkit-box-orient: vertical;
          //   -webkit-line-clamp: 2;
          // }
          .info-artist {
            justify-content: space-between;
            .artists {
              display: flex;
            }
          }
        }
      }
    }
  }
  &.album-box,
  &.album-box-kuke {
    .item {
      cursor: pointer;
      // .wrapper {
      //   .image {
      //   }
      //   .info {
      //   }
      // }
    }
  }
  &.musicScore-box {
    .item {
      .wrapper {
        height: 255px;
        // .image {
        // }
        &:hover {
          .viewCover {
            display: flex;
          }
        }
        .info {
          > h2 {
            cursor: pointer;
          }
          .info-content {
            justify-content: space-around;
            > li {
              display: flex;
              font-size: 18px;
              // padding-bottom: 30px;
              i {
                font-size: 28px;
              }
              &:first-child {
                justify-content: space-between;
                padding-right: 10px;
              }
              &:last-child {
                > p {
                  cursor: pointer;
                }
              }
              > p {
                color: #333333;
                margin: 0;
                &:first-child {
                  margin-right: 25px;
                }
                > span {
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
    }
  }
  &.song-list {
    .item {
      cursor: pointer;
    }
  }
  .load-bottom {
    width: 100%;
    margin: auto;
  }
}
</style>
